<template>
  <div class="issue-container">
    <el-card class="issue-card" shadow="hover">
      <div class="header">
        <div class="title-section">
          <h2 class="page-title">
            <el-icon class="title-icon"><Warning /></el-icon>
            问题汇总
            <el-tag v-if="props.projectData.project_name" type="primary" size="small" class="project-tag">
              {{ props.projectData.project_name }}
            </el-tag>
          </h2>
          <p class="description">
            汇总项目执行中的重要问题、跟踪处理
            <span v-if="props.projectData.project_id" class="project-id">
              (项目编号: {{ props.projectData.project_id }})
            </span>
          </p>
        </div>
        <div class="header-actions">
          <el-button v-if="canAdd" type="primary" @click="openDialog()" class="create-btn">
            <el-icon><Plus /></el-icon>
            <span class="btn-text">提交问题</span>
          </el-button>
          <el-button type="success" @click="exportIssues" :disabled="!issueList.length" class="export-btn">
            <el-icon><Download /></el-icon>
            <span class="btn-text">导出数据</span>
          </el-button>
        </div>
      </div>

      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-row">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索问题描述、提出人..."
            class="search-input"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <div class="filter-selects">
            <el-select v-model="filterStatus" placeholder="问题状态" clearable @change="handleSearch" class="filter-select">
              <el-option label="待处理" value="待处理" />
              <el-option label="处理中" value="处理中" />
              <el-option label="已解决" value="已解决" />
              <el-option label="已关闭" value="已关闭" />
            </el-select>
            <el-select v-model="filterSeverity" placeholder="严重等级" clearable @change="handleSearch" class="filter-select">
              <el-option label="High" value="High" />
              <el-option label="Medium" value="Medium" />
              <el-option label="Low" value="Low" />
            </el-select>
          </div>
        </div>
      </div>

      <!-- 批量操作 -->
      <div class="batch-actions" v-if="hasPermission && selectedIssues.length > 0">
        <el-alert
          title="已选择问题"
          :description="`已选择 ${selectedIssues.length} 个问题`"
          type="info"
          show-icon
          :closable="false"
        >
          <template #default>
            <div class="batch-buttons">
              <el-select v-model="batchStatus" placeholder="批量更新状态" class="batch-select">
                <el-option label="待处理" value="待处理" />
                <el-option label="处理中" value="处理中" />
                <el-option label="已解决" value="已解决" />
                <el-option label="已关闭" value="已关闭" />
              </el-select>
              <el-button size="small" type="primary" @click="batchUpdateStatus" :disabled="!batchStatus">
                批量更新
              </el-button>
              <el-button size="small" @click="clearSelection">
                取消选择
              </el-button>
            </div>
          </template>
        </el-alert>
      </div>

      <!-- 项目ID提示 -->
      <div v-if="!props.projectData?.project_id && !props.projectId" class="no-project-tip">
        <el-empty description="请先选择项目">
          <el-button type="primary" @click="$router.push('/project/list')">
            去选择项目
          </el-button>
        </el-empty>
      </div>

      <!-- 问题列表 -->
      <div class="table-container" v-else>
        <el-table
          :data="issueList"
          stripe
          border
          class="issue-table"
          v-loading="loading"
          empty-text="暂无问题数据"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" v-if="hasPermission" />
          <el-table-column prop="description" label="问题描述" min-width="200" show-overflow-tooltip />
          <el-table-column prop="proposer" label="提出人" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)" size="small">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="severity" label="严重等级" width="100">
            <template #default="scope">
              <el-tag :type="getSeverityTagType(scope.row.severity)" size="small">
                {{ scope.row.severity }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="responsible_person" label="负责人" width="100" />
          <el-table-column prop="responsible_department" label="负责部门" width="120" />
          <el-table-column prop="issue_date" label="提出日期" width="120" />
          <el-table-column prop="deadline" label="解决期限" width="120" />
          <el-table-column prop="impact" label="风险影响" min-width="150" show-overflow-tooltip />
          <el-table-column label="操作" width="250" fixed="right" v-if="hasPermission">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" type="primary" @click="viewDetail(scope.row)">
                  <el-icon><View /></el-icon>
                  <span class="action-text">查看</span>
                </el-button>
                <el-button size="small" type="success" @click="editIssue(scope.row)">
                  <el-icon><Edit /></el-icon>
                  <span class="action-text">编辑</span>
                </el-button>
                <el-button v-if="canAdd" size="small" type="danger" @click="deleteIssue(scope.row)">
                  <el-icon><Delete /></el-icon>
                  <span class="action-text">删除</span>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @update:current-page="currentPage = $event"
          @update:page-size="pageSize = $event"
        />
      </div>

      <!-- 问题统计 -->
      <div class="issue-stats">
        <el-row :gutter="20">
          <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ total }}</div>
                <div class="stat-label">总问题数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.pending || 0 }}</div>
                <div class="stat-label">待处理</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.processing || 0 }}</div>
                <div class="stat-label">处理中</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.resolved || 0 }}</div>
                <div class="stat-label">已解决</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.closed || 0 }}</div>
                <div class="stat-label">已关闭</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.high || 0 }}</div>
                <div class="stat-label">高优先级</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 问题详情对话框 -->
    <el-dialog
      v-model="detailVisible"
      title="问题详情"
      width="800px"
      align-center
      class="detail-dialog"
    >
      <div class="issue-detail" v-if="currentIssue">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="问题描述">{{ currentIssue.description }}</el-descriptions-item>
          <el-descriptions-item label="提出人">{{ currentIssue.proposer }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTagType(currentIssue.status)" size="small">
              {{ currentIssue.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="严重等级">
            <el-tag :type="getSeverityTagType(currentIssue.severity)" size="small">
              {{ currentIssue.severity }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="负责人">{{ currentIssue.responsible_person }}</el-descriptions-item>
          <el-descriptions-item label="负责部门">{{ currentIssue.responsible_department }}</el-descriptions-item>
          <el-descriptions-item label="提出日期">{{ currentIssue.issue_date }}</el-descriptions-item>
          <el-descriptions-item label="解决期限">{{ currentIssue.deadline }}</el-descriptions-item>
          <el-descriptions-item label="风险影响" :span="2">{{ currentIssue.impact }}</el-descriptions-item>
          <el-descriptions-item label="已采取的措施" :span="2">{{ currentIssue.action || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ currentIssue.remark || '暂无' }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 创建/编辑问题对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑问题' : '提交问题'"
      width="700px"
      align-center
      class="form-dialog"
    >
      <el-form
        ref="issueFormRef"
        :model="issueForm"
        :rules="issueRules"
        label-width="120px"
        class="issue-form"
      >
        <el-form-item label="问题描述" prop="description">
          <el-input
            v-model="issueForm.description"
            type="textarea"
            :rows="3"
            placeholder="请详细描述问题"
          />
        </el-form-item>
        <el-form-item label="提出人" prop="proposer">
          <el-input v-model="issueForm.proposer" placeholder="请输入提出人姓名" />
        </el-form-item>
        <el-form-item label="问题状态" prop="status">
          <el-select v-model="issueForm.status" placeholder="请选择问题状态">
            <el-option label="待处理" value="待处理" />
            <el-option label="处理中" value="处理中" />
            <el-option label="已解决" value="已解决" />
            <el-option label="已关闭" value="已关闭" />
          </el-select>
        </el-form-item>
        <el-form-item label="严重等级" prop="severity">
          <el-select v-model="issueForm.severity" placeholder="请选择严重等级">
            <el-option label="High" value="High" />
            <el-option label="Medium" value="Medium" />
            <el-option label="Low" value="Low" />
          </el-select>
        </el-form-item>
        <el-form-item label="风险影响" prop="impact">
          <el-input
            v-model="issueForm.impact"
            type="textarea"
            :rows="2"
            placeholder="请描述风险影响"
          />
        </el-form-item>
        <el-form-item label="负责部门" prop="responsible_department">
          <el-input v-model="issueForm.responsible_department" placeholder="请输入负责部门" />
        </el-form-item>
        <el-form-item label="负责人" prop="responsible_person">
          <el-input v-model="issueForm.responsible_person" placeholder="请输入负责人姓名" />
        </el-form-item>
        <el-form-item label="已采取的措施">
          <el-input
            v-model="issueForm.action"
            type="textarea"
            :rows="2"
            placeholder="请描述已采取的措施"
          />
        </el-form-item>
        <el-form-item label="解决期限">
          <el-date-picker
            v-model="issueForm.deadline"
            type="date"
            placeholder="请选择解决期限"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="实际解决时间">
          <el-date-picker
            v-model="issueForm.resolution_date"
            type="date"
            placeholder="请选择实际解决时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="issueForm.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitIssue" :loading="submitLoading">
          {{ isEdit ? '更新' : '提交' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Warning, Plus, Search, View, Edit, Delete, Download } from '@element-plus/icons-vue'
import { getProjectIssueListByProjectId, createProjectIssue, updateProjectIssue, deleteProjectIssue } from '../../api/projectIssue'

// 定义props
const props = defineProps({
  projectId: {
    type: String,
    default: ''
  },
  projectData: {
    type: Object,
    default: () => ({})
  }
})

// 获取当前登录用户信息
const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
const isAdmin = computed(() => currentUser.value.userType === '管理员')

// 检查是否为当前项目的项目经理
const isProjectManager = computed(() => {
  if (!props.projectData || !props.projectData.project_manager) {
    return false
  }
  // 检查当前用户是否为该项目的项目经理
  return currentUser.value.username === props.projectData.project_manager || 
         currentUser.value.userId === props.projectData.project_manager ||
         currentUser.value.id === props.projectData.project_manager
})

// 检查是否有权限操作（只有当前项目的项目经理可以操作）
const hasPermission = computed(() => {
  return isProjectManager.value
})

// 检查是否可以新增和删除（只有当前项目的项目经理可以操作）
const canAdd = computed(() => {
  return isProjectManager.value
})

// 响应式数据
const issueList = ref([])
const loading = ref(false)
const detailVisible = ref(false)
const dialogVisible = ref(false)
const submitLoading = ref(false)
const searchKeyword = ref('')
const filterStatus = ref('')
const filterSeverity = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const isEdit = ref(false)
const currentIssue = ref(null)
const issueFormRef = ref(null)
const selectedIssues = ref([])
const batchStatus = ref('')

// 表单数据
const issueForm = reactive({
  project_id: '',
  issue_date: '',
  proposer: '',
  status: '',
  description: '',
  impact: '',
  severity: '',
  responsible_department: '',
  responsible_person: '',
  action: '',
  deadline: '',
  resolution_date: '',
  remark: ''
})

// 表单验证规则
const issueRules = {
  project_id: [
    { required: true, message: '项目ID不能为空', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入问题描述', trigger: 'blur' }
  ],
  proposer: [
    { required: true, message: '请输入提出人', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择问题状态', trigger: 'change' }
  ],
  impact: [
    { required: true, message: '请输入风险影响', trigger: 'blur' }
  ],
  severity: [
    { required: true, message: '请选择严重等级', trigger: 'change' }
  ],
  responsible_department: [
    { required: true, message: '请输入负责部门', trigger: 'blur' }
  ],
  responsible_person: [
    { required: true, message: '请输入负责人', trigger: 'blur' }
  ]
}

// 统计数据
const stats = computed(() => {
  const stats = { pending: 0, processing: 0, resolved: 0, closed: 0, high: 0, medium: 0, low: 0 }
  issueList.value.forEach(issue => {
    if (issue.status === '待处理') stats.pending++
    else if (issue.status === '处理中') stats.processing++
    else if (issue.status === '已解决') stats.resolved++
    else if (issue.status === '已关闭') stats.closed++
    
    if (issue.severity === 'High') stats.high++
    else if (issue.severity === 'Medium') stats.medium++
    else if (issue.severity === 'Low') stats.low++
  })
  return stats
})

// 获取严重等级标签样式
function getSeverityTagType(severity) {
  const severityMap = {
    'High': 'danger',
    'Medium': 'warning',
    'Low': 'info'
  }
  return severityMap[severity] || 'info'
}

// 获取状态标签样式
function getStatusTagType(status) {
  const statusMap = {
    '待处理': 'info',
    '处理中': 'warning',
    '已解决': 'success',
    '已关闭': 'danger'
  }
  return statusMap[status] || 'info'
}



// 获取问题列表
async function fetchIssueList() {
  const currentProjectId = props.projectData.project_id || props.projectId || route.params.id
  console.log('获取问题列表，当前项目ID:', currentProjectId)
  if (!currentProjectId) {
    loading.value = false
    issueList.value = []
    total.value = 0
    return
  }
  
  loading.value = true
  try {
    const params = {
      page:1,
      pageSize: 10,
      where:{"project_id":currentProjectId}
    }
    
    if (searchKeyword.value) {
      //params.filter += `,description:like:${searchKeyword.value}`
      Object.assign(params.where, {description:searchKeyword.value})
    }
    
    if (filterStatus.value) {
      //params.filter += `,status:${filterStatus.value}`
      Object.assign(params.where, {status:filterStatus.value})
    }
    
    if (filterSeverity.value) {
      Object.assign(params.where, {severity:filterSeverity.value})
    }
    console.log(params)
    const response = await getProjectIssueListByProjectId(params)
    console.log('获取问题列表，响应数据:', response.records)
    issueList.value = response.records || []
    total.value = response.total || 0
  } catch (error) {
    console.error('获取问题列表失败:', error)
    ElMessage.error('获取问题列表失败')
    issueList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索处理
function handleSearch() {
  currentPage.value = 1
  fetchIssueList()
}

// 分页处理
function handleSizeChange(size) {
  pageSize.value = size
  currentPage.value = 1
  fetchIssueList()
}

function handleCurrentChange(page) {
  currentPage.value = page
  fetchIssueList()
}

// 打开创建对话框
function openDialog() {
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
}

// 查看详情
function viewDetail(issue) {
  currentIssue.value = issue
  detailVisible.value = true
}

// 编辑问题
function editIssue(issue) {
  isEdit.value = true
  currentIssue.value = issue
  Object.assign(issueForm, issue)
  dialogVisible.value = true
}

// 删除问题
async function deleteIssue(issue) {
  try {
    await ElMessageBox.confirm(
      `确定要删除问题"${issue.description}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await deleteProjectIssue(issue.id)
    ElMessage.success('删除成功')
    fetchIssueList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 提交问题
async function submitIssue() {
  if (!issueFormRef.value) return
  
  try {
    await issueFormRef.value.validate()
    submitLoading.value = true
    
    const currentProjectId = props.projectData.project_id || props.projectId || route.params.id
    const formData = { ...issueForm }
    formData.project_id = currentProjectId // 设置项目ID
    formData.issue_date = new Date().toISOString().split('T')[0] // 设置当前日期
    
    // 处理空日期字段，避免传入"Invalid date"
    if (!formData.deadline || formData.deadline === 'Invalid date' || formData.deadline === '') {
      delete formData.deadline
    }
    if (!formData.resolution_date || formData.resolution_date === 'Invalid date' || formData.resolution_date === '') {
      delete formData.resolution_date
    }
    
    if (isEdit.value) {
      await updateProjectIssue(currentIssue.value.id, formData)
      ElMessage.success('更新成功')
    } else {
      await createProjectIssue(formData)
      ElMessage.success('创建成功')
    }
    
    dialogVisible.value = false
    fetchIssueList()
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error(isEdit.value ? '更新失败' : '创建失败')
  } finally {
    submitLoading.value = false
  }
}

// 重置表单
function resetForm() {
  const currentProjectId = props.projectData.project_id || props.projectId || route.params.id
  Object.assign(issueForm, {
    project_id: currentProjectId, // 设置项目ID
    issue_date: '',
    proposer: '',
    status: '',
    description: '',
    impact: '',
    severity: '',
    responsible_department: '',
    responsible_person: '',
    action: '',
    deadline: '',
    resolution_date: '',
    remark: ''
  })
  if (issueFormRef.value) {
    issueFormRef.value.clearValidate()
  }
}

// 导出问题数据
function exportIssues() {
  if (!issueList.value.length) {
    ElMessage.warning('暂无数据可导出')
    return
  }
  
  try {
    const headers = [
      '问题描述',
      '提出人',
      '状态',
      '严重等级',
      '负责人',
      '负责部门',
      '提出日期',
      '解决期限',
      '风险影响',
      '已采取的措施',
      '实际解决时间',
      '备注'
    ]
    
    const csvData = issueList.value.map(issue => [
      issue.description || '',
      issue.proposer || '',
      issue.status || '',
      issue.severity || '',
      issue.responsible_person || '',
      issue.responsible_department || '',
      issue.issue_date || '',
      issue.deadline || '',
      issue.impact || '',
      issue.action || '',
      issue.resolution_date || '',
      issue.remark || ''
    ])
    
    const csvContent = [headers, ...csvData]
      .map(row => row.map(cell => `"${cell}"`).join(','))
      .join('\n')
    
    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    const url = URL.createObjectURL(blob)
    link.setAttribute('href', url)
    link.setAttribute('download', `问题汇总_${props.projectData.project_name || '项目'}_${new Date().toISOString().split('T')[0]}.csv`)
    link.style.visibility = 'hidden'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败')
  }
}

// 处理选择变化
function handleSelectionChange(selection) {
  selectedIssues.value = selection
}

// 批量更新状态
async function batchUpdateStatus() {
  if (!selectedIssues.value.length || !batchStatus.value) {
    ElMessage.warning('请选择问题和状态')
    return
  }
  
  try {
    const promises = selectedIssues.value.map(issue => {
      const updateData = {
        ...issue,
        status: batchStatus.value
      }
      return updateProjectIssue(issue.id, updateData)
    })
    
    await Promise.all(promises)
    ElMessage.success(`成功更新 ${selectedIssues.value.length} 个问题的状态`)
    selectedIssues.value = []
    batchStatus.value = ''
    fetchIssueList()
  } catch (error) {
    console.error('批量更新失败:', error)
    ElMessage.error('批量更新失败')
  }
}

// 清除选择
function clearSelection() {
  selectedIssues.value = []
  batchStatus.value = ''
}

// 路由相关
const route = useRoute()

// 监听项目数据变化
watch(() => props.projectData, (newProjectData) => {
  if (newProjectData && newProjectData.project_id) {
    console.log('项目数据变化，重新加载问题列表:', newProjectData.project_id)
    currentPage.value = 1
    searchKeyword.value = ''
    filterStatus.value = ''
    filterSeverity.value = ''
    fetchIssueList()
  }
}, { deep: true })

// 监听项目ID变化
watch(() => props.projectId, (newProjectId) => {
  if (newProjectId) {
    console.log('项目ID变化，重新加载问题列表:', newProjectId)
    currentPage.value = 1
    searchKeyword.value = ''
    filterStatus.value = ''
    filterSeverity.value = ''
    fetchIssueList()
  }
})

// 页面加载时获取数据
onMounted(() => {
  try {
    fetchIssueList()
  } catch (error) {
    console.error('问题汇总页面初始化失败:', error)
  }
})
</script>

<style scoped>
.issue-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.issue-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  flex-wrap: wrap;
  gap: 16px;
}

.title-section {
  flex: 1;
  min-width: 0;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.title-icon {
  font-size: 24px;
  color: #f56c6c;
}

.description {
  margin: 0;
  font-size: 14px;
  color: #909399;
  line-height: 1.5;
  word-break: break-word;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.create-btn, .export-btn {
  padding: 12px 20px;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
}

.btn-text {
  margin-left: 4px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-selects {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-select {
  width: 150px;
  min-width: 120px;
}

.search-input {
  flex: 1;
  max-width: 300px;
  min-width: 200px;
}

.table-container {
  overflow-x: auto;
  border-radius: 8px;
}

.issue-table {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  min-width: 800px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
}

.issue-stats {
  margin-top: 20px;
}

.stat-card {
  text-align: center;
  border-radius: 8px;
  height: 100%;
}

.stat-content {
  padding: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.issue-detail {
  padding: 20px 0;
}

.issue-form {
  padding: 20px 0;
}

.batch-actions {
  margin-bottom: 20px;
}

.batch-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.batch-select {
  width: 150px;
  margin-right: 10px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-text {
  margin-left: 4px;
}

.project-tag {
  margin-left: 10px;
}

.project-id {
  color: #e6a23c;
  font-weight: 500;
}

.no-project-tip {
  text-align: center;
  padding: 40px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-selects {
    justify-content: flex-start;
  }
  
  .search-input {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .issue-container {
    padding: 10px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .header-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .create-btn, .export-btn {
    width: 100%;
    justify-content: center;
  }
  
  .filter-selects {
    flex-direction: column;
    width: 100%;
  }
  
  .filter-select {
    width: 100%;
  }
  
  .search-input {
    min-width: 0;
  }
  
  .batch-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .batch-select {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-text {
    display: none;
  }
  
  .stat-content {
    padding: 15px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .stat-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .issue-container {
    padding: 5px;
  }
  
  .page-title {
    font-size: 18px;
  }
  
  .description {
    font-size: 12px;
  }
  
  .stat-content {
    padding: 10px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .stat-label {
    font-size: 11px;
  }
}

:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table th) {
  background: #f5f7fa !important;
  font-weight: 600;
}

:deep(.el-table .cell) {
  word-break: break-word;
}

:deep(.el-dialog) {
  border-radius: 12px;
  margin: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}

@media (max-width: 768px) {
  :deep(.el-dialog) {
    width: 95% !important;
    margin: 10px;
  }
  
  :deep(.el-dialog__body) {
    padding: 15px 20px;
  }
  
  :deep(.el-form-item__label) {
    text-align: left;
  }
  
  :deep(.el-form-item) {
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  :deep(.el-dialog) {
    width: 98% !important;
    margin: 5px;
  }
  
  :deep(.el-dialog__body) {
    padding: 10px 15px;
  }
}
</style> 